<template>
	<view class="container">

		<view class="user-section">
			<view class="user-info-box">
				<view class="portrait-box">
					<image class="portrait" :src="userInfo.userImage || '/static/missing-face.png'"></image>
				</view>
				<view class="info-box">
					{{userInfo.userName || '游客'}}
					<!-- <text class="username"></text> -->
				</view>
				<button v-if="userInfo&&userInfo.id" class="sx_b" open-type="getUserInfo" plain="true" @getuserinfo="sxuserinfo">
					<image class="sx_v" src="../../static/sxx.png" mode="widthFix"></image>
				</button>
			</view>
		</view>

		<view class="cover-container" :style="[{
				transform: coverTransform,
				transition: coverTransition
			}]"
		 @touchstart="coverTouchstart" @touchmove="coverTouchmove" @touchend="coverTouchend">
			<image class="arc" src="/static/arc.png"></image>
			<!-- 订单 -->
			<view class="order-section">
				<view class="order-title" @tap="toorderlist" data-type="all">
					<view>我的订单</view>
					<view>
						<text>查看全部订单</text>
						<text class="yticon icon-you"></text>
					</view>
				</view>
				<view class="order-item" @tap="toorderlist" data-type="0" hover-class="common-hover" :hover-stay-time="50">
					<uni-badge v-if="orderInfo.unPayNum>0" :text="orderInfo.unPayNum" type="error" size="small"></uni-badge>
					<text class="myicon myicon-daifukuan"></text>
					<text>待付款</text>
				</view>
				<view class="order-item" @tap="toorderlist" data-type="1" hover-class="common-hover" :hover-stay-time="50">
					<uni-badge v-if="orderInfo.beDelivered>0" :text="orderInfo.beDelivered" type="error" size="small"></uni-badge>
					<text class="myicon myicon-daifahuo"></text>
					<text>待配送</text>
				</view>
				<view class="order-item" @tap="toorderlist" data-type="2" hover-class="common-hover" :hover-stay-time="50">
					<uni-badge v-if="orderInfo.beReceived>0" :text="orderInfo.beReceived" type="error" size="small"></uni-badge>
					<text class="myicon myicon-daishouhuo"></text>
					<text>待收货</text>
				</view>
				<!-- <view class="order-item" @tap="toorderlist" data-type="4" hover-class="common-hover" :hover-stay-time="50">
					<uni-badge v-if="orderInfo.pp" :text="orderInfo.pp" type="error" size="small"></uni-badge>
					<text class="myicon myicon-yiwanc"></text>
					<text>已收货</text>
				</view> -->
				<view class="order-item" @tap="toorderlist" data-type="3" hover-class="common-hover" :hover-stay-time="50">
					<uni-badge v-if="orderInfo.unComment>0" :text="orderInfo.unComment" type="error" size="small"></uni-badge>
					<text class="myicon myicon-pingjia"></text>
					<text>评价</text>
				</view>
			</view>

			<view v-if="userInfo && userInfo.id" class="history-section icon">
				<list-cell icon="icon-dizhi" iconColor="#5fcda2" title="地址管理" @eventClick="toAddressList"></list-cell>
				<list-cell v-if="userInfo && userInfo.isAgent == 0" icon="myicon myicon-daili" iconColor="#e07472" title="代理申请"></list-cell>
				<button class="btn-kf" plain="true" type="default" open-type="contact" size="mini">
					<list-cell icon="icon-xiaoxi" iconColor="#54b4ef" title="联系客服" border=""></list-cell>
				</button>
			</view>
			<view v-if="!userInfo.id" class="login-section" @tap="loginClick">授权登陆</view>
		</view>

		<login ref="login" @myuserinfo="myuserinfo"></login>
	</view>
</template>
<script>
	import listCell from '@/components/mix-list-cell';
	import UniBadge from '@/components/uni-badge/uni-badge';
	import login from '@/components/login.vue';
	let startY = 0,
		moveY = 0,
		pageAtTop = true;
	export default {
		components: {
			listCell,
			UniBadge,
			login
		},
		data() {
			return {
				coverTransform: 'translateY(0px)',
				coverTransition: '0s',
				moving: false,
				userInfo: {},
				orderInfo: {},
			}
		},
		onLoad() {

		},
		onShow() {
			let loginOpendId = uni.getStorageSync('loginOpendId');
			if (loginOpendId) {
				var data = {
					openid: loginOpendId
				}
				this.$refs.login.getUserByOpenId(data);
				//获取各个状态的订单数量
				this.orderStatusNum();
			}
			if (uni.getStorageSync('userInfo')) {
				this.usertype = uni.getStorageSync('userInfo').isAgent;
				//查询购物车数量
				this.$api.cartProductNum(uni.getStorageSync('userInfo').userCode);
			}
		},
		methods: {
			/*-----------------------------点击-----------------------------*/
			/**
			 * 跳转地址列表
			 */
			toAddressList: function() {
				console.log('跳转地址列表');
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
			/**
			 * 跳转订单列表
			 */
			toorderlist: function(e) {
				if (uni.getStorageSync('userInfo')) {
					var status = e.currentTarget.dataset.type;
					uni.navigateTo({
						url: "/pages/order/order?status=" + status
					})
				}
			},

			/**
			 * 登陆点击
			 */
			loginClick: function() {
				this.$refs.login.showLogin();
			},
			//-------------------------------函数-------------------------------------
			//获取各个状态的订单数量
			orderStatusNum: function() {
				let than = this;
				than.$api.myPost({
					url: 'orderStatusNum',
					data: {
						userCode: uni.getStorageSync('userInfo').userCode
					},
					success(res) {
						if (res.status == 'success') {
							let orderInfo = {
								unPayNum: res.unPayNum || 0,
								beDelivered: res.beDelivered || 0,
								beReceived: res.beReceived || 0,
								unComment: res.unComment || 0
							};
							than.orderInfo = orderInfo;

						}
					}
				})
			},
			/*-----------------------------监听------------------------------*/
			/**
			 * 刷新用户信息
			 */
			sxuserinfo: function(e) {
				console.log('刷新用户信息----', e)
				if (e.detail.errMsg == "getUserInfo:ok") {
					if (uni.getStorageSync('userInfo')) {
						let loginOpendId = uni.getStorageSync('userInfo').openid;
						let info = e.detail.userInfo;
						let nickName = info.nickName; //姓名
						let avatarUrl = info.avatarUrl; //头像
						var data = {
							openid: loginOpendId,
							userName: nickName,
							userImage: avatarUrl,
							issx: true
						}
						this.$refs.login.getUserByOpenId(data);
					}
				}
			},
			/**
			 * 登陆获取的信息
			 * @param {Object} e
			 */
			myuserinfo: function(e) {
				console.log('登陆获取的信息--------', e)
				this.userInfo = e;
			},
			/*-----------------------------动画-----------------------------*/
			/**
			 *  会员卡下拉和回弹
			 *  1.关闭bounce避免ios端下拉冲突
			 *  2.由于touchmove事件的缺陷（以前做小程序就遇到，比如20跳到40，h5反而好很多），下拉的时候会有掉帧的感觉
			 *    transition设置0.1秒延迟，让css来过渡这段空窗期
			 *  3.回弹效果可修改曲线值来调整效果，推荐一个好用的bezier生成工具 http://cubic-bezier.com/
			 */
			coverTouchstart(e) {
				if (pageAtTop === false) {
					return;
				}
				this.coverTransition = 'transform .1s linear';
				startY = e.touches[0].clientY;
			},
			coverTouchmove(e) {
				moveY = e.touches[0].clientY;
				let moveDistance = moveY - startY;
				if (moveDistance < 0) {
					this.moving = false;
					return;
				}
				this.moving = true;
				if (moveDistance >= 80 && moveDistance < 100) {
					moveDistance = 80;
				}

				if (moveDistance > 0 && moveDistance <= 80) {
					this.coverTransform = `translateY(${moveDistance}px)`;
				}
			},
			coverTouchend() {
				if (this.moving === false) {
					return;
				}
				this.moving = false;
				this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
				this.coverTransform = 'translateY(0px)';
			}
		}
	}
</script>
<style lang='scss'>
	/*
		自定义字体图标
	*/
	@font-face {
		font-family: myicon;
		font-weight: normal;
		font-style: normal;
		src: url('//at.alicdn.com/t/font_1325746_bc4gduicvlp.ttf') format('truetype');
	}

	.myicon {
		font-family: "myicon" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.myicon-daifukuan:before {
		content: "\e61d";
	}

	.myicon-daifahuo:before {
		content: "\e61f";
	}

	.myicon-daishouhuo:before {
		content: "\e617";
	}

	.myicon-yiwanc:before {
		content: "\e63f";
	}

	.myicon-daili:before {
		content: "\e612";
	}

	.myicon-pingjia:before {
		content: "\e635";
	}

	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}

	.btn-kf {
		width: 100%;
		border: none !important;
		padding: 0 !important;
		text-align: left;
	}

	.container {
		height: 100vh;
		background-color: #f5f5f5;
	}

	.user-section {
		height: 620upx;
		padding: 100upx 30upx 0;
		position: relative;
		background-color: #F65451;

		.bg {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			filter: blur(1px);
			opacity: .7;
		}
	}

	.user-info-box {
		height: 180upx;
		display: flex;
		align-items: center;
		position: relative;
		z-index: 1;

		.portrait {
			width: 130upx;
			height: 130upx;
			border: 5upx solid #fff;
			border-radius: 50%;
		}

		.info-box {
			font-size: $font-lg + 6upx;
			color: #fff;
			margin-left: 20upx;
			max-width: 60%;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			word-break: break-all;
		}

		/* .username {
			font-size: $font-lg + 6upx;
			color: #fff;
			margin-left: 20upx;
			max-width: 60%;
		} */
	}

	.vip-card-box {
		display: flex;
		flex-direction: column;
		color: #f7d680;
		height: 240upx;
		background: linear-gradient(left, rgba(0, 0, 0, .7), rgba(0, 0, 0, .8));
		border-radius: 16upx 16upx 0 0;
		overflow: hidden;
		position: relative;
		padding: 20upx 24upx;

		.card-bg {
			position: absolute;
			top: 20upx;
			right: 0;
			width: 380upx;
			height: 260upx;
		}

		.b-btn {
			position: absolute;
			right: 20upx;
			top: 16upx;
			width: 132upx;
			height: 40upx;
			text-align: center;
			line-height: 40upx;
			font-size: 22upx;
			color: #36343c;
			border-radius: 20px;
			background: linear-gradient(left, #f9e6af, #ffd465);
			z-index: 1;
		}

		.tit {
			font-size: $font-base+2upx;
			color: #f7d680;
			margin-bottom: 28upx;

			.yticon {
				color: #f6e5a3;
				margin-right: 16upx;
			}
		}

		.e-b {
			font-size: $font-sm;
			color: #d8cba9;
			margin-top: 10upx;
		}
	}

	.cover-container {
		background: $page-color-base;
		margin-top: -150upx;
		padding: 0 30upx;
		position: relative;
		background: #f5f5f5;
		padding-bottom: 20upx;

		.arc {
			position: absolute;
			left: 0;
			top: -34upx;
			width: 100%;
			height: 36upx;
		}
	}

	.tj-sction {
		@extend %section;

		.tj-item {
			@extend %flex-center;
			flex-direction: column;
			height: 140upx;
			font-size: $font-sm;
			color: #75787d;
		}

		.num {
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 8upx;
		}
	}

	.order-section {
		@extend %section;
		padding: 28upx 0;
		flex-wrap: wrap;
		top: -160upx;
		position: relative;

		.order-title {
			width: 100%;
			display: flex;
			justify-content: space-between;
			padding: 10rpx 30rpx 30rpx;
			font-size: 30rpx;
			border-bottom: 2rpx solid #EBEEF5;
			margin-bottom: 30rpx;

			view {
				font-weight: bold;
			}

			text {
				font-weight: normal;
				color: #C0C4CC;
				font-size: 26rpx;
			}
		}

		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: $font-sm;
			color: $font-color-dark;
			position: relative;

			uni-badge {
				position: absolute;
				right: 0;
				top: -10rpx;
			}
		}

		.yticon,
		.myicon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}

		.myicon {
			font-size: 50upx;
			font-weight: bold;
		}

		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}

	.history-section {
		/* padding: 30upx 0 0; */
		margin-top: 20upx;
		background: #fff;
		border-radius: 10upx;
		top: -160upx;
		position: relative;

		.sec-header {
			display: flex;
			align-items: center;
			font-size: $font-base;
			color: $font-color-dark;
			line-height: 40upx;
			margin-left: 30upx;

			.yticon {
				font-size: 44upx;
				color: #5eba8f;
				margin-right: 16upx;
				line-height: 40upx;
			}
		}

		.h-list {
			white-space: nowrap;
			padding: 30upx 30upx 0;

			image {
				display: inline-block;
				width: 160upx;
				height: 160upx;
				margin-right: 20upx;
				border-radius: 10upx;
			}
		}
	}

	.login-section {
		margin-top: 20rpx;
		background: #DD524D;
		border-radius: 10rpx;
		top: -100rpx;
		position: relative;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		padding: 20rpx 0;
	}

	.sx_v {
		width: 40rpx;
		height: 40rpx;
		margin: 5rpx;
		float: left;
	}

	.sx_b {
		width: 50rpx !important;
		height: 50rpx !important;
		border: none !important;
		padding: 0 !important;
		margin: 0 !important;
		overflow: unset !important;
		margin-bottom: -8rpx !important;
		margin-left: 10rpx !important;
	}
</style>
